<template>
  <view class="container" :style="{backgroundImage: `url(${staticImgs.bg})`}">
    <navigationBar :my-property="navigationBarDataInfo" />
    <image :src="staticImgs.star1" class="star1" />
    <image :src="staticImgs.star2" class="star2" />
    <image :src="staticImgs.back" class="back-btn" @click="backHandle" />
    <image :src="staticImgs.start" class="start-btn" mode="widthFix" @click="startScl" />
  </view>
</template>

<script>
  import navigationBar from "@/components/navigationBar/navigationBar.vue";

  export default {
    components:{
      navigationBar
    },
    props: {
      sclInfo: {
        type: Object,
        default: () => {}
      }
    },
    data() {
      return {
        staticImgs: {
          bg: this.imgBaseURL + '/scl/introduce/fpacpt/bg.png',
          star1: this.imgBaseURL + '/scl/introduce/fpacpt/star1.png',
          star2: this.imgBaseURL + '/scl/introduce/fpacpt/star2.png',
          back: this.imgBaseURL + '/scl/introduce/fpacpt/back.png',
          start: this.imgBaseURL + '/scl/introduce/fpacpt/start.png'
        },
        navigationBarDataInfo: {
          "bg_color": "transparent",
          "color": "#000",
          "name": this.sclInfo.sclName,
          "hasEntity": false
        }
      }
    },
    methods: {
      startScl(){
        this.$emit('startScl')
      },
      backHandle() {
        this.$emit('backHandle')
      }
    }
  }
</script>

<style lang="scss" scoped>
  @keyframes flash {
    0% {
      opacity: 1;
    }
    70% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  .container {
    height: 1624rpx;
    background-position: center top;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: relative;
  }

  .back-btn {
    position: absolute;
    left: 0;
    width: 123rpx;
    height: 88rpx;
    top: 682rpx;
  }

  .start-btn {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 110rpx;
    margin: 0 auto;
    width: 550rpx;
  }

  .star1 {
    position: absolute;
    left: 18rpx;
    width: 153rpx;
    height: 153rpx;
    top: 865rpx;
    animation: flash 3s linear infinite;
  }

  .star2 {
    position: absolute;
    right: 4rpx;
    width: 170rpx;
    height: 170rpx;
    top: 1017rpx;
    animation: flash 3s linear infinite;
  }
</style>